<template>
<section class="content" id="content">
  <lq-form :form="form" :rules="rules" ref="addMHBIFormRef">
    <template #basicFeatureFile="scope">
      <el-upload
          class="upload-demo"
          drag
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
          :disabled="form.innerAttrs.readonly"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文档拖拽到此处，或 <em>点击上传</em>
          <div>支持文件格式：.rar .zip .doc .docx .pdf ，单个文件最大10mb</div>
        </div>
      </el-upload>
    </template>
  </lq-form>
</section>
</template>

<script setup lang="ts">
/**
 * 全局方法引入
 */
const global = getCurrentInstance().appContext.config.globalProperties;

import {
  ref,
  reactive,
  onMounted,
  toValue,
  inject,
  defineExpose,
  getCurrentInstance
} from "vue";
import {FormInstance, FormRules} from "element-plus";

import LqForm from "@/pages/components/LqForm.vue";
import {editKey} from "../../components/keys.js";
import commonConst from "@/config/const";


const operationCase = inject(editKey);

// 表单数据结构
const form = ref({
  innerAttrs: {
    size: 'default', /*可选：large, default*/
    labelPosition: 'right',
    labelWidth: 180,
    // disabled: false,
    readonly: false
  },
  model: {
    hazardCode: '',
    name: '',
    level: '',
    administrativeDivision: '',
    address: '',
    activityType: '',
    cellType: '',
    cellProperty: '',
    isDangerousProcess: '',
    dangerousProcess: '',
    isAlerteqp: '',
    isEmerstop: '',
    isVideosys: '',
    isAppearance: '',
    status: '',
    hasAccident3year: '',
    resident500m: '',
    rValue: '',
    alphaValue: '',
    userDate: '',
    headName: '',
    headPhone: '',
    headTitle: '',
    tecHeadName: '',
    tecHeadPhone: '',
    tecHeadTitle: '',
    opHeadName: '',
    opHeadPhone: '',
    opHeadTitle: '',
    remark: ''
  },
  formItems: [
    {type: 'input', label: '重大危险源名称: ', prop: 'name', span: 12, maxlength: 30, placeholder: '重大危险源名称'},
    {type: 'select', label: '重大危险源级别: ', prop: 'level', span: 12, options: commonConst.majorHazardLevelList, placeholder: '请选择重大危险源级别'},
    {type: 'input', label: '所在行政区域: ', prop: 'administrativeDivision', span: 12, placeholder: '所在行政区域'},
    {type: 'input', label: '重大危险源详细地址: ', prop: 'address', span: 12, placeholder: '重大危险源详细地址'},
    {type: 'input', label: '活动类型: ', prop: 'activityType', span: 12, placeholder: '活动类型'},
    {type: 'select', label: '单元类型: ', prop: 'cellType', span: 12, options: commonConst.cellTypeList, placeholder: '请选择单元类型'},
    {type: 'select', label: '生产存储场所产权: ', prop: 'cellProperty', span: 12, options: commonConst.cellPropertyList, placeholder: '请选择生产存储场所产权'},
    {type: 'radio', label: '是否设计危险工艺: ', prop: 'isDangerousProcess', span: 12, options: [{label: '是', value: 1},{label: '否', value: 0}]},
    {type: 'input', label: '涉及危险工艺: ', prop: 'dangerousProcess', span: 12, placeholder: '请选择涉及危险工艺'},
    {type: 'radio', label: '是否配置在线检测报警装置: ', prop: 'isAlerteqp', span: 12, options: [{label: '是', value: 1},{label: '否', value: 0}]},
    {type: 'radio', label: '是否装备紧急停车系统: ', prop: 'isEmerstop', span: 12, options: [{label: '是', value: 1},{label: '否', value: 0}]},
    {type: 'radio', label: '是否设置视频监控系统: ', prop: 'isVideosys', span: 12, options: [{label: '是', value: 1},{label: '否', value: 0}]},
    {type: 'radio', label: '是否配备独立的安全仪表系统: ', prop: 'isAppearance', span: 12, options: [{label: '是', value: 1},{label: '否', value: 0}]},
    {type: 'radio', label: '重大危险源状态: ', prop: 'status', span: 12, options: [{label: '活动', value: '活动'},{label: '停止', value: '停止'}]},
    {type: 'radio', label: '近三年是否发生安全生产事故: ', prop: 'hasAccident3year', span: 12, options: [{label: '是', value: 1},{label: '否', value: 0}]},
    {type: 'input', label: '周边500米常驻人口数量: ', prop: 'resident500m', span: 12, placeholder: '周边500米常驻人口数量'},
    {type: 'input', label: 'R值: ', prop: 'rValue', span: 12, placeholder: 'R值'},
    {type: 'input', label: '校正系数α: ', prop: 'alphaValue', span: 12, placeholder: '校正系数α'},
    {type: 'date', label: '投用日期: ', prop: 'userDate', span: 12, placeholder: '投用日期', size: 'default'},
    {type: 'blank', span: 12, },
    {type: 'input', label: '主要负责人: ', prop: 'headName', span: 12, placeholder: '主要负责人'},
    {type: 'input', label: '主要负责人联系电话: ', prop: 'headPhone', span: 12, placeholder: '主要负责人联系电话'},
    {type: 'input', label: '主要负责人职务: ', prop: 'headTitle', span: 12, placeholder: '主要负责人职务'},
    {type: 'blank', span: 12, },
    {type: 'input', label: '技术负责人: ', prop: 'tecHeadName', span: 12, },
    {type: 'input', label: '技术负责人联系电话: ', prop: 'tecHeadPhone', span: 12, placeholder: '技术负责人'},
    {type: 'input', label: '技术负责人职务: ', prop: 'tecHeadTitle', span: 12, placeholder: '技术负责人职务'},
    {type: 'blank', span: 12, },
    {type: 'input', label: '操作负责人: ', prop: 'opHeadName', span: 12, placeholder: '操作负责人'},
    {type: 'input', label: '操作负责人联系电话: ', prop: 'opHeadPhone', span: 12, placeholder: '操作负责人联系电话'},
    {type: 'input', label: '操作负责人职务: ', prop: 'opHeadTitle', span: 12, placeholder: '操作负责人职务'},
    {type: 'blank', span: 12, },
    {type: 'textarea', label: '备注: ', prop: 'remark', rows: 3, span: 24, },
    {type: 'slot', label: '重大危险源基本特征表: ', prop: 'basicFeatureFile', span: 12, },
  ],
  buttonsAttrs: {
    align: 'left'
  }
});

// 表单验证规则
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入重大危险源名称', trigger: 'blur'}],
  level: [{ required: true, message: '请输入重大危险源级别', trigger: 'change'}],
  administrativeDivision: [{ required: true, message: '所在行政区域', trigger: 'blur'}],
  address: [{ required: true, message: '请选择重大危险源详细地址', trigger: 'blur'}],
});

// 表单验证规则
const addMHBIFormRef = ref<FormInstance>();

const handleSubmit = async () => {
  const valid = await addMHBIFormRef.value?.validateForm();
  // console.log(valid); //true or false
  return valid;
}

const handleReset = () => {
  addMHBIFormRef.value?.resetFields();
}

const getModel = () => {
  return form.value.model;
}
//新增危险源信息 和 备案申请表 后这两个页面数据只读
const disableForm = () => {
  // form.value.innerAttrs.disabled = true;
  form.value.innerAttrs.readonly = true;
}

defineExpose({
  handleSubmit,
  handleReset,
  getModel,
  disableForm
})

onMounted(() => {
  if (operationCase.value.operaCase==='view'){
    // form.value.innerAttrs.disabled = true;
    form.value.innerAttrs.readonly = true;
  } else {
    // form.value.innerAttrs.disabled = false;
    form.value.innerAttrs.readonly = false;
  }

  console.log('onMounted id=' + operationCase.value.id);

  if (operationCase.value.operaCase==='view' || operationCase.value.operaCase==='edit') {
    global.$api.getMajorHazardBasicInfoById({id: operationCase.value.id}).then(({data}) => {
      if (data.status === 'OK') {
        form.value.model = data.data;
        decideRadio(['isDangerousProcess', 'isAlerteqp', 'isEmerstop', 'isVideosys', 'isAppearance', 'hasAccident3year'], data.data);
      }
    });
  }
})

const decideRadio = (props=[], resp) => {
  props.forEach((prop)=>{
    form.value.model[prop] = (resp[prop]==true ? 1 : 0);
  })
}

</script>

<style scoped>

</style>
